<template>
	<view class="page">
		<!-- 左侧滚动视图  商品类目-->
		<scroll-view scroll-y class="left" :style="{height:windowHeight+'px'}">
			<view>
				<uni-list>
					<uni-list-item clickable @click='switchCategory(i)' v-for="(item,i) in categoryList" :key="i"
						:title="item.cname" :class='{category:true,active:i==curCategory}'></uni-list-item>
				</uni-list>

			</view>
		</scroll-view>
		<!-- 右侧滚动视图  对应的商品 -->
		<scroll-view scroll-y class="right" :style="{height:windowHeight+'px'}">
			<view>
				<uni-list>
					<uni-list-item v-for="(item,i) in productList" 
					:thumb="$url.base+item.pic"
					thumbSize="lg"
					:key="item.lid" 
					:title="item.title" 
					ellipsis="2"
					link='navigateTo'
					:to="'../product-details/product-details?pid='+item.lid"
					></uni-list-item>
				</uni-list>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				windowHeight: 0,
				categoryList: "",
				curCategory: -1 ,// 设置为-1 加载到数据后改为0
				productList:[]
			};
		},
		onLoad() {
			uni.getSystemInfo({
					success: (result) => {
						// console.log(result)
						this.windowHeight = result.windowHeight
						
					}
				}),
				uni.showLoading({
					title: '商品加载中'
				})
			let url = this.$url.productCategroy
			console.log(url)
			uni.request({
				url,
				success: (res) => {
					// console.log(res)
					// this.categroyList=res.data
					// 数据太少 循环两次
					this.categoryList = [...res.data, ...res.data]
					this.curCategory = 0
				},
				fail: (err) => {
					console.log(err)
				},
				complete: () => {
					uni.hideLoading()
				}
			})
		},
		methods: {
			switchCategory(i) {
				this.curCategory = i
			}
		},
		watch: {
			curCategory() {
				// 监视curCategory的改变
				// console.log('newValue',newValue)
				// console.log('oldValue',oldValue)
				let url = this.$url.productList
				//根据当前商品类别的查询关键字，调用服务器端接口，查询相应的商品
				let kw = this.categoryList[this.curCategory].keywords
				// console.log(url, kw)
				uni.showLoading({
					title:'加载中'
				})
				uni.request({
					url,
					data:{kw},
					success: (res) => {
						// console.log('res',res.data.data)
						this.productList=res.data.data
					},
					fail: (err) => {
						console.log(err)
					},
					complete: () => {
						uni.hideLoading()
					}
				})
			}
		},
	}
</script>

<style lang="scss">
	.page {
		display: flex;

		.left {
			width: 200rpx;
			flex-shrink: 0;
			.category {
				font-size: $uni-font-size-sm;
				background-color: $uni-bg-color-grey;

				&.active {
					background-color: #fff;
				}
			}
		}

		.right {
			flex: 1;
			width: 525rpx;
		}
	}
</style>
